<?php
$this->headLink()->appendStylesheet($this->baseUrl() . '/public/styles/datepicker/jquery.datepick.css');
$this->headLink()->appendStylesheet($this->baseUrl() . '/public/styles/colorbox/colorbox.css');
$this->headScript()->prependFile($this->baseUrl() . '/public/scripts/datepicker/jquery.datepick.js');
$this->headScript()->prependFile($this->baseUrl() . '/public/scripts/colorbox/jquery.colorbox-min.js');
$codeRandom = $this->codeRand;
?>
<style>
    .custom-orden-buttons{float: left; width: 500px; margin-left: 10px}
</style>

<article class="module width_full">
    <header><h3>Adicionar Orden Nueva</h3></header>
    <div class="module_content">
        
        <div style="display: none;">
            <img id="calImg" src="<?php echo $this->baseUrl() . '/public/img/calendar-blue.gif' ?>" alt="Popup" class="trigger"/>
        </div>

        <form id="custom-orden" method="POST" action="<?php echo $this->url(); ?>">
            <fieldset title="Nueva orden" style="width: 550px;">
                <legend style="display: none;">Titulo - Descripci&oacute;n</legend>
                <p style="float: left; width: 480px; margin-left: 35px;">
                    <label>Titulo:</label>
                    <input type="text" name="title" id="title" />
                </p>
                <p style="float: left; width: 480px; margin-left: 35px;">
                    <label>Detalle de la Orden:</label>
                    <textarea name="description" id="description" rows="5" cols="60"></textarea>
                </p>
                <p style="float: left; width: 496px; margin-left: 35px;">
                    Nota: Lunes a Jueves las ordenes despues de las 19:00pm seran para el sgte dia.
                </p>
                <p style="float: left; width: 480px; margin-left: 35px;">
                    Viernes hasta las 17:00pm despues seran tomadas para el Lunes.
                </p>

                <p style="float: left; width: 480px; margin-left: 35px;">
                    <label>Fecha de ingreso de la orden:</label>
                    <label><?php echo $this->date_create ?></label>
                    <input type="hidden" id="create_date" name="create_date" value="<?php echo $this->date_create ?>"/>
                </p>
            </fieldset>

            <fieldset title="Agencias" style="width: 550px;">
                <legend style="display: none;">Para la agencia ..... ?</legend>

                <div id="listDep" style="float: left; width: 20%; padding-left: 20px;">
                    <p style="float: left; width: 480px;"><label>Agencias:</label></p>
                    <?php foreach ($this->departaments as $dep): ?>
                        <p>
                            <input type="checkbox" class="checkbox" id="checkDepartament" name="checkDepartament[]" value="<?php echo $dep->id ?>"/><?php echo $dep->name ?>
                        </p>
                    <?php endforeach; ?>
                    <p><input type="checkbox" name="checkAllDep" id="checkAllDep" onclick="jqCheckAll3(this.id, 'listDep');"/> Todos</p>
                </div>

                <div style="float: left; width: 75%;">
                    <p style="float: left; width: 480px;"><label>Trabajo a realizar:</label></p> 
                    <div style="margin-bottom:4px;">
                        <input type="button" id="btnAdd" value="  +  " />
                        <input type="button" id="btnDel" value="  -  " />
                    </div>
                    <div id="input1" style="margin-bottom:4px; overflow: hidden" class="clonedInput">
                        <input type="text" name="name1" id="name1" value="Concepto" style="width: 70px" readonly="readonly"/>
                        <input type="text" name="date1" id="date1" class="datejob" style="width: 80px"/>
                        <input type="text" name="detail1" id="detail1" value="Definir el concepto" style="width: 135px" readonly="readonly"/>
                    </div>
                    
                    <input type="hidden" name="num_job" id="num_job" value="1"/>
                </div>

            </fieldset>

            <fieldset title="Archivos" style="width: 550px;">
                <legend style="display: none;">Adjuntar archivos</legend>
                <div style="height:200px;margin-left: 10px;">
                    <p>
                        <span style="font-style: italic;">En esta seccion puede adicionar los archivos de ayuda para la orden.</span>
                    </p>
                    <p>
                        <span style="font-style: italic;">* Archivos: gif, jpg, jpeg, png, tif, doc, docx, xls, xlsx, ppt, pptx, pps, ppsx, psd, txt, rtf</span>
                    </p> 
                    <p><span>Archivos maximo 5 Megabytes</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class='inline' href="#inline_content">Subir Archivos</a></p>
                    <div id="result-attachment"></div>
                </div>
            </fieldset>
            <input type="hidden" name="code_attachment" id="code_attachment" value="<?php echo $codeRandom ?>" />
            <input type="submit" class="finish" value="Enviar Orden" />
        </form>
    </div>

    <!-- This contains the hidden content for inline calls -->
    <div style='display:none'>
        <div id='inline_content' style='padding:10px; background:#fff;'>
            <?php echo $this->partial('index/upload.phtml', 'attachment', array('code' => $codeRandom)); ?>
        </div>
    </div>

    <footer></footer>
</article>

<script>
    function jqCheckAll3( id, pID ){
        $( "#" + pID + " :checkbox").attr('checked', $('#' + id).is(':checked'));
    }
</script>
<script language="javascript">
    //Delete files
    $(document).on("click", "a.delAttach", function(){ 
        idAttach = $(this).attr('rel');
        $.ajax({
            type: "GET",
            url: "<?php echo $this->baseUrl() ?>/attachment/index/delete-attachment-temp/id/"+idAttach,
            success: function( strData ){
                $('#attachment_'+idAttach).remove();
            }
        });
    });
    // modal colorbox 
    $(".inline").colorbox({
        inline:true, 
        width:"480px"
    });
    //pasos para la orden
    $('#custom-orden').stepy({
        backLabel:	'Atras',
        block:		true,
        errorImage:	true,
        nextLabel:	'Siguiente',
        titleClick:	true,
        validate:	true
    });
    // Optionaly
    $('#custom-orden').validate({
        errorPlacement: function(error, element) {
            $('#custom-orden div.stepy-error').append(error);
        }, rules: {
            'title':		'required',
            'description':	'required',
            'checkDepartament[]':	{ required:true, minlength: 1 }
        }, messages: {
            'title':		{ required: '*Ingrese el titulo' },
            'description':	{ required: '*Ingrese la descripcion' },
            'checkDepartament[]':	{ required: '*Seleccione al menos una agencia', minlength: '*Seleccione al menos una agencia' }
        }
    });
    ///////////////////////////////////////////////////////////////////////////
    //date pick job
    $('.datejob').datepick({
        showOnFocus: false,
        dateFormat: 'dd-mm-yyyy', 
        showTrigger: '#calImg'
    });
    //add job 
    $('#btnAdd').click(function() {
        var num     = $('.clonedInput').length;
        var newNum  = new Number(num + 1);
 
        $(".datejob").datepick('destroy');
 
        var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
 	
        newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum).attr('value','').removeAttr('readonly');
        newElem.children(':nth-child(2)').attr('id', 'date' + newNum).attr('name', 'date' + newNum).attr('value','');
        newElem.children(':nth-child(3)').attr('id', 'detail' + newNum).attr('name', 'detail' + newNum).attr('value','').removeAttr('readonly');
        $('#input' + num).after(newElem);
        $('#btnDel').removeAttr('disabled');

        if (newNum == 50)
            $('#btnAdd').attr('disabled','disabled');

        $('.datejob').datepick({
            showOnFocus: false,
            dateFormat: 'dd-mm-yyyy',
            showTrigger: '#calImg'
        });
	$('#num_job').val(newNum);		
    });
 
    $('#btnDel').click(function() {
        var num = $('.clonedInput').length;
 
        $('#input' + num).remove();
        $('#btnAdd').removeAttr('disabled');
 
        if (num-1 == 1)
            $('#btnDel').attr('disabled','disabled');
        
        $('#num_job').val(num-1);
    });
 
    $('#btnDel').attr('disabled','disabled');

</script>